<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  <!-- <ul id="box">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul> -->
  <ul id="box">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>
<script>
    //  data([]) 就是把数组中的内容跟元素建立一一映射
    //  enter() 就是获取没有对应映射元素的哪些数据
    //  exit()  获取的是多余的元素
    let lis = d3.select('#box')
    .selectAll('li')
    .data([111,222,333,444,555]);
    console.log(lis.enter())
    console.log(lis.exit())

    lis.text(function(item,index){
      return '这时原有的元素索引是：' + index + "；值是：" + item
    })
    .enter()
    .append('li')
    .text(function(item,index){
      return '新增的元上都索引是：' + index + "；值是：" + item
    })

    lis.exit().text('超出的元素')
</script>